<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" href="../img/com/logo.png">
    <link rel="stylesheet" href="../asserts/css/normalize.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/pageCom.css">
    <style>
        .container > div,
        .top > div,
        .bottom > div {
            flex: 1;
        }

        .top, .bottom {
            display: flex;
        }

        .ec003 header{
            text-align: center;
        }
        /*重写button样式*/
        .btnGroup button{
            padding: 0.2rem 2rem;
            margin-left: 2%;
        }
    </style>
</head>
<body id="01_02yewuzonglan" data-title="业务总览">
<div class="container">
    <h2 hidden>业务总览</h2>
    <div class="top">
        <div class="top-l">
            <div class="chartBox ec001">
                <div class="chartTitle">
                    <h3>省份借款方数量排名</h3>
                </div>
                <div class="chartContent">
                    <div class="chartBody">
                        <div id="ec001_currentCompetitiveness"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="top-m">
            <div class="chartBox ec001">
                <div class="chartTitle">
                    <h3>个人公司占比</h3>
                </div>
                <div class="chartContent">
                    <div class="chartBody">
                        <div id="ec002_competitivenessIndicators"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="top-r">
            <div class="chartBox ec002">
                <div class="chartTitle">
                    <h3>行业人数分布</h3>
                </div>
                <div class="chartContent">
                    <div class="chartBody">
                        <div id="ec003_competitivenessIndicators"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="bottom-L">
            <div class="chartBox ec004">
                <div class="chartTitle">
                    <h3>个人-各种分布</h3>
                </div>
                <div class="chartContent">
                    <header>
                        <div class="btnGroup">
                            <button class="active">性别</button>
                            <button>年龄</button>
                            <button>收入</button>

                        </div>
                    </header>
                    <div class="chartBody">
                        <div id="ec004_marketCompetitiveness"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom-m">
            <div class="chartBox ec001">
                <div class="chartTitle">
                    <h3>企业-成立时间分布</h3>
                </div>
                <div class="chartContent">
                    <div class="chartBody">
                        <div id="ec005_competitiveness"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom-r">
            <div class="chartBox ec001">
                <div class="chartTitle">
                    <h3>企业-注册资本分布</h3>
                </div>
                <div class="chartContent">
                    <div class="chartBody">
                        <div id="ec006_competitiveness"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--后台对数据用-->
<!--<input class="ec001_currentCompetitiveness" type="hidden" value=""/>
<input class="ec002_competitivenessIndicators" type="hidden" value=""/>
<input class="ec003_competitivenessIndicators" type="hidden" value=""/>
<input class="ec004_marketCompetitiveness" type="hidden" value=""/>
<input class="ec005_competitiveness" type="hidden" value=""/>
<input class="ec006_competitiveness" type="hidden" value=""/>-->

<script src="../asserts/js/echarts-4.0.js"></script>
<script src="../asserts/js/jquery-2.2.4.js"></script>
<script src="../js/pageCom.js"></script>
<script src="../js/chartsCom.js"></script>
<script>
    var allCharts = [];
    //后台对数据用
    /*var inputOne = $(".ec001_currentCompetitiveness").val();
    var inputTwo = $(".ec002_competitivenessIndicators").val();
    var inputThree = $(".ec003_competitivenessIndicators").val();
    var inputFour = $(".ec004_marketCompetitiveness").val();
    var inputFive = $(".ec005_competitiveness").val();
    var inputSix = $(".ec006_competitiveness").val();*/
    $(function () {
        var ec001 = echarts.init($("#ec001_currentCompetitiveness")[0]);
        ec001.setOption(opt_bar_horizon);
        ec001.setOption({
            grid: {
                left: "22%",
                right: "16%",
                top: "18%"
            },
            xAxis: {
                type: 'value',
                name: '个数',


            },
            yAxis: {
                name: '借款方',
                data: ['借款方', '借款方', '借款方', '借款方', '借款方']
            },
            series: [{
                data: [1, 3, 5, 7, 10],//
                type: 'bar',
                barWidth: 15
            }]
        });

        //模块二

        var ec002 = echarts.init($("#ec002_competitivenessIndicators")[0]);
        ec002.setOption(opt_pie);
        ec002.setOption({
            label: {
                fontSize:12,
                color: '#fff'

            },
            legend:{
                left:10,
                textStyle:{
                    fontSize:12
                }
            },
            series : [
                {
                    name:'高管资质',
                    type:'pie',
                    radius : '60%',
                    center: ['50%', '50%'],
                    data:[
                        {value:10, name:'个人'},
                        {value:14, name:'公司'}

                    ]


                }
            ]
        });
        //模块三
        var ec003 = echarts.init($("#ec003_competitivenessIndicators")[0]);
        // ec002.setOption(opt_com);
        ec003.setOption(opt_bar_vertical);
        ec003.setOption({
            legend: {
                show: false
            },
            grid: {
                left: "10%",
                right: "10%",
                top: "14%"
            },
            xAxis:
                {
                    name: '年份',
                    type: 'category',
                    data: ['农业', '工业', '餐饮业', '建筑业', '旅游业', '金融业']
                },
            yAxis: {
                name: '人数',
                type: 'value',
                nameGap:15
            },
            series: [
                {
                    name: '经营能力',
                    type: 'bar',
                    data: [2,4,5,7,9,7]
                },
                {
                    name: '盈利能力',
                    type: 'bar',
                    data: [1,3,5,7,8,9]
                }
            ]
        });
        //个人分布
        var data = [{value:18, name:'男'},{value:14, name:'女'}];
        threePie(data);
        $(".btnGroup>button").click(function () {
            var type = $(".btnGroup .active").text();
            var data = [];
            if(type == '性别'){
                data = [{value:18, name:'男'},{value:14, name:'女'}];
            }
            else if(type == '年龄'){
                data = [{value:3, name:'60后'},{value:6, name:'70后'},{value:16, name:'80后'},{value:20, name:'90后'},{value:10, name:'00后'}];
            }
            else{//收入
                data = [{value:10, name:'A'},{value:15, name:'B'},{value:20, name:'C'},{value:12, name:'D'},{value:18, name:'E'}];
            }
            threePie(data);
        });
        function threePie(data){
            var ec004 = echarts.init($("#ec004_marketCompetitiveness")[0]);
            ec004.setOption(opt_pie);
            ec004.setOption({
                label: {
                    fontSize:12,
                    color: '#fff'

                },
                legend:{
                    left:10,
                    textStyle:{
                        fontSize:12
                    }
                },
                series : [
                    {
                        name:'高管资质',
                        type:'pie',
                        radius : '60%',
                        center: ['50%', '50%'],
                        data:data


                    }
                ]
            });
        }

        //模块五
        var ec005 = echarts.init($("#ec005_competitiveness")[0]);
        ec005.setOption(opt_bar_vertical);
        ec005.setOption({
            legend: {
                show: false
            },
            grid: {
                left: "10%",
                right: "10%",
                top: "14%"
            },
            xAxis:
                {
                    name: '年份',
                    type: 'category',
                    data: ['2012', '2013', '2014', '2015', '2016', '2017'],

                },
            yAxis: {
                name: '个数',
                type: 'value',
                // nameGap:15
            },
            series: [
                {
                    name: '经营能力',
                    type: 'bar',
                    data: [2,4,5,7,9,7],
                    barWidth: barWidth

                },

            ]
        });

        var ec006 = echarts.init($("#ec006_competitiveness")[0]);
        ec006.setOption(opt_pie);
        ec006.setOption({
            label: {
                fontSize:12,
                color: '#fff'

            },
            legend:{
                right:0,
                top:0,
                textStyle:{
                    fontSize:12
                }
            },
            series : [
                {
                    name:'高管资质',
                    type:'pie',
                    radius : '60%',
                    center: ['40%', '55%'],
                    data:[
                        {value:10, name:'100万以下'},
                        {value:14, name:'1000-5000万'},
                        {value:16, name:'100-1000万'},
                        {value:18, name:'5000-5000万'},
                        {value:22, name:'E'}

                    ]


                }
            ]
        });

        //本页所有图表
        allCharts = [ec001, ec002, ec003, ec004, ec005, ec006];

    });


</script>
</body>
</html>
